<template>
  <div>
    <section class="details-root">
      <img
        @click="back()"
        class="details-header-back"
        src="../../../static/images/task/back_white.png"
        alt
      />
      <img
        @click="shares"
        v-show="0"
        class="details-header-share"
        src="../../../static/images/task/share.png"
        alt
      />
      <img
        class="details-mian-pic"
        :src="
          returnData.pic_id
            ? $photo + returnData.pic_id
            : '../../../static/images/task/task_detal_top.png'
        "
        alt
      />
    </section>
    <main class="details-main">
      <div class="details-main-u">
        <img
          :src="
            returnData.pic_id
              ? $photo + returnData.pic_id
              : '../../../static/images/task/user.png'
          "
          alt
        />
        <div class>
          <div class="d-user-name">{{ returnData.name }}</div>
          <div class="d-user-r">与她约会</div>
        </div>
      </div>
      <div class="d-info">
        <span>#初见</span>
        {{ returnData.introduced }}
      </div>
      <div class="d-line"></div>
      <section class="d-more-info">
        <div class="d-more-i-title">
          个人信息
          <img src="../../../static/images/task/mine.png" alt />
        </div>
        <div class="d-more-i-tags">
          <div class="d-more-i-tag">{{ returnData.marry }}</div>
          <div class="d-more-i-tag">{{ returnData.education }}</div>
          <div class="d-more-i-tag">{{ returnData.age }}岁</div>
          <div class="d-more-i-tag">{{ returnData.height }}CM</div>
          <div class="d-more-i-tag">{{ returnData.weight }}KG</div>
          <div class="d-more-i-tag">{{ returnData.work }}</div>
        </div>
      </section>
      <div class="d-line"></div>
      <section class="d-more-info">
        <div class="d-more-i-title">
          她的标签
          <img src="../../../static/images/task/tag.png" alt />
        </div>
        <div class="d-more-i-tags">
          <div
            class="d-more-i-tag"
            v-for="(item, index) in returnData.hobby"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </section>
      <div class="d-line"></div>
      <section class="d-more-info">
        <div class="d-more-i-title">
          她的评价
          <img src="../../../static/images/task/fabu.png" alt />
        </div>
        <div
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="0"
        >
          <section
            class="d-pinglun-area"
            v-for="(item, index) in appraiser.data"
            :key="index"
          >
            <div class="d-pj-user-info">
              <img
                class="user-pic"
                :src="
                  item.pic_id
                    ? $photo + item.pic_id
                    : '../../../static/images/task/user.png'
                "
                alt
              />
              <div class="d-pj-user-info-r">
                <div>
                  <div class="d-pj-username">{{ item.name }}</div>
                  <div class="d-pj-user-timeago">{{ item.create_time }}前</div>
                </div>
                <div class="d-pj-user-star">
                  <div class="get-star"></div>
                </div>
              </div>
            </div>
            <div class="d-pj-msg">{{ item.content }}</div>
          </section>
        </div>
        <div class="text" v-if="dataStart">没有更多数据了~</div>
      </section>
      <section class="d-buy">
        <div class="d-b-times" @click="insertLabel()">
          <span>写评价</span>
        </div>
        <!-- <div class="d-b-btn" @click="clickInt">确认邀约</div> -->
        <div class="d-b-btn" @click="trueYY()">确认邀约</div>
      </section>
    </main>
    <section class="d-pay-mask" v-show="showPay" @touchmove.prevent>
      <div class="d-pay-content">
        <div class="d-p-title">余额</div>
        <div class="d-p-money">
          <img src="../../../static/images/task/money.png" alt />
          {{ task_money }}元
        </div>
        <div class="d-p-tips">本次下单你需要支付{{ task_money }}元的余额</div>
        <div class="d-p-sure-btn" @click="clickPay()">确认</div>
      </div>
    </section>
    <!-- 个人等级 -->
    <div class="kuangYe" v-if="kuangYenum" @click="kuangYenum = !kuangYenum">
      <div class="cont" @click.stop>
        <div>个人等级</div>
        <div>您还没有达到相应的会员权限查看此类别，请前往个人中心购买~</div>
        <div @click="payMyu()">前往购买</div>
      </div>
    </div>
    <!-- 评价添加窗口 -->
    <div
      class="likeGood_insert"
      v-if="showLikeGoods"
      @click="showLikeGoods = !showLikeGoods"
    >
      <div class="likeGood_insert_kuang" @click.stop>
        <div>请输入评价</div>
        <input
          type="text"
          name="labelName"
          placeholder="请输入评价内容"
          v-model="labelNameIn"
        />
        <div @click="insertLabelqr()">确定</div>
      </div>
    </div>
    <van-popup class="shares" v-model="is_share" position="bottom">
      <img
        @click="shareBtn(1)"
        src="../../../static/images/insert/icon_QQ.png"
      />
      <img
        @click="shareBtn(2)"
        src="../../../static/images/insert/QQ Zone.png"
      />
      <img
        @click="shareBtn(3)"
        src="../../../static/images/insert/weixin_icon.png"
      />
      <img @click="shareBtn(4)" src="../../../static/images/insert/pyq.png" />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is_share: false,
      showPay: false,
      kuangYenum: false,
      // 个人等级
      greenNum: 'A',
      // 评价弹框显示
      showLikeGoods: false,
      // 获取到的评价
      labelNameIn: '',
      returnData: [],
      page: 1,
      appraiser: [],
      busy: false,
      dataStart: false,
      count: 0,
      task_money: null
    }
  },
  methods: {
    qqShare() {
      console.log(1)
    },
    qqShareZ() {
      console.log(2)
    },
    wxShare() {
      console.log(3)
    },
    wxShareP() {
      console.log(4)
    },
    shareBtn(index) {
      switch (index) {
        case 1:
          this.qqShare()
          break
        case 2:
          this.qqShareZ()
          break
        case 3:
          this.wxShare()
          break
        case 4:
          this.wxShareP()
          break
        default:
          break
      }
    },
    shares() {
      this.is_share = !this.is_share
    },
    clickInt() {
      this.showPay = !this.showPay
    },
    clickPay() {
      this.showPay = !this.showPay
    },
    back() {
      this.$router.push({
        path: '/homePage',
        query: {
          subs: this.$route.query.backDatac,
          selectSX: this.$route.query.backDatacT,
          sex: this.$route.query.sex
        }
      })
    },
    // 前往购买
    payMyu() {
      this.kuangYenum = false
      this.$jump('/personal')
    },
    // 确认邀约
    trueYY() {
      this.$axios({
        method: 'POST',
        url: 'Needloginaction/confirmInvitation',
        data: {
          token: sessionStorage.token,
          uid: this.$route.query.uid
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$router.push({
              path: '/detail',
              query: {
                uid: this.$route.query.uid
              }
            })
          } else {
            this.kuangYenum = true
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })

      // this.greenNum !== "B" ? (this.kuangYenum = true) : (this.$jump('/detail'))
    },
    // 评价
    insertLabelqr() {
      if (this.labelNameIn == '') {
        alert('请填写评论内容')
        return false
      }
      this.$axios({
        method: 'POST',
        url: 'Needloginaction/makeEva',
        data: {
          token: sessionStorage.token,
          mid: this.$route.query.uid,
          content: this.labelNameIn,
          type: 1
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            alert(res.data.msg)
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
      this.showLikeGoods = false
    },
    // 写评价开启
    insertLabel() {
      this.showLikeGoods = true
    },
    loadMore() {
      this.busy = true
      if (this.page == 1) {
        this.comment()
      } else if (this.appraiser.data.length != this.count) {
        if (this.appraiser.data == []) return
        this.comment()
      } else {
        this.dataStart = !this.dataStart
        return false
      }
    },
    comment() {
      this.$axios({
        method: 'POST',
        url: 'Flink/information_comment',
        data: {
          id: this.$route.query.uid,
          type: 1,
          page: this.page
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.dataStart = true
              return false
            } else {
              this.count = res.data.count
              if (this.page == 1) {
                this.appraiser.data = res.data.data
              } else {
                res.data.data.forEach(item => {
                  this.appraiser.data.push(item)
                })
              }
              this.page++
            }
          } else {
            alert(res.data.msg)
            //back()
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
      this.busy = false
    }
  },
  components: {},
  created() {
    this.task_money = sessionStorage.task_money
    this.$axios({
      method: 'POST',
      url: '/Flink/lookUp',
      data: {
        token: sessionStorage.token,
        uid: this.$route.query.uid
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.returnData = res['data']['data']
          // console.log(res.data);
        } else {
          alert(res.data.msg)
          //back()
        }
      })
      .catch(error => {
        alert('网络错误，请刷新后重试~')
      })
  }
}
</script>

<style scoped lang="scss">
.shares {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.text {
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
// 爱好标签添加窗口
.likeGood_insert {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 10rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border:1px solid red;
  & > .likeGood_insert_kuang {
    width: 7.826667rem;
    height: 4.986667rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    & > div:nth-child(1) {
      width: 6.626667rem;
      height: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.4444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > input {
      width: 6.026667rem;
      height: 1rem;
      background-color: #e0e0e0;
      border-radius: 0.066667rem;
    }
    & > div:nth-child(3) {
      width: 6.626667rem;
      height: 1rem;
      background-color: #343434;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.4444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
}
.kuangYe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.kuangYe > .cont {
  width: 7.826667rem;
  height: 5.88rem;
  background-color: #ffffff;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.kuangYe > .cont > div:nth-child(1) {
  text-align: center;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #303030;
}
.kuangYe > .cont > div:nth-child(2) {
  text-align: center;
  font-size: 0.413333rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #888888;
  line-height: 0.756rem;
}
.kuangYe > .cont > div:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #303030;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  width: 6.626667rem;
  height: 1rem;
  background-color: #343434;
  border-radius: 0.506667rem;
}
.d-line {
  width: 10rem;
  height: 0.08rem;
  background-color: #bfbfbf;
  opacity: 0.08;
}
.details-root {
  position: relative;
  width: 10rem;
  height: 8.64rem;
}
.details-header-back {
  position: absolute;
  left: 0.23rem;
  top: 0.35rem;
  width: 0.33rem;
  height: 0.55rem;
}
.details-header-share {
  position: absolute;
  width: 0.56rem;
  height: 0.53rem;
  top: 0.35rem;
  right: 0.23rem;
}
.details-mian-pic {
  width: 10rem;
  height: 8.64rem;
}
.details-main {
  /* width: 9.12rem;
  margin: 0 auto; */
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.details-main-u {
  display: flex;
  height: 1.2rem;
  width: 9.12rem;
  margin: 0.2rem auto 0;
}

.details-main-u img {
  width: 1.2rem;
  height: 1.19rem;
  border-radius: 100%;
  margin-right: 10px;
}
.details-main-u > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-user-name {
  font-family: PingFangSC-Medium;
  font-size: 0.44rem;
  line-height: 0.44rem;
  color: #303030;
}
.d-user-r {
  width: 2.09rem;
  height: 0.56rem;
  background-color: #343434;
  border-radius: 0.28rem;
  font-family: KozGoPr6N-Regular;
  font-size: 0.37rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-info {
  margin: 10px auto;
  font-size: 0.37rem;
  color: #303030;
  width: 9.12rem;
}
.d-info span {
  font-family: PingFang-SC-Medium;
  font-size: 0.37rem;
  color: #343434;
}
.d-more-info {
  width: 9.12rem;
  margin: 0.2rem auto;
}
.d-more-info img {
  width: 0.33rem;
  height: 0.31rem;
  margin-left: 0.1rem;
}
.d-more-i-title {
  font-family: PingFang-SC-Regular;
  font-size: 0.41rem;
  color: #343434;
}
.d-more-i-tags {
  display: flex;
  padding: 0.42rem 0;
  flex-direction: row;
  flex-wrap: wrap;
}
.d-more-i-tag {
  padding: 0.17rem 0.35rem;
  border-radius: 0.16rem;
  border: solid 1px #a0a0a0;
  opacity: 0.52;
  margin-right: 0.21rem;
  margin-bottom: 0.3rem;
}
// .d-pinglun-area {
// }
.d-pj-user-info-r {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.d-pj-user-info {
  display: flex;
  height: 1.2rem;
  margin-top: 0.4rem;
}
.d-pj-user-info .user-pic {
  width: 1.19rem;
  height: 1.16rem;
  border-radius: 100%;
  margin-right: 0.45rem;
}
.d-pj-username {
  font-family: PingFangSC-Medium;
  font-size: 0.44rem;
  line-height: 0.44rem;
  color: #303030;
  font-weight: 600;
}
.d-pj-user-timeago {
  margin-top: 0.21rem;
  font-family: PingFangSC-Medium;
  font-size: 0.34rem;
  line-height: 0.44rem;
  color: #888888;
}
.d-pj-user-star {
  width: 2.25rem;
  background: #000;
  height: 0.45rem;
  background: url(../../../static/images/task/star.png);
  background-size: 0.45rem;
  background-repeat: repeat-x;
  opacity: 0.8;
}
.d-pj-user-star .get-star {
  width: 70%;
  height: 100%;
  background: url(../../../static/images/task/star_selecct.png);
  background-size: 0.45rem;
  background-repeat: repeat-x;
}
.d-pj-msg {
  margin-top: 0.2rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.44rem;
  line-height: 0.44rem;
  color: #303030;
}
.d-buy {
  width: 10rem;
  height: 1.53rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.03rem 0.12rem 0rem rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
.d-b-times {
  height: 0.4rem;
  padding-left: 0.49rem;
  background: url(../../../static/images/task/fabu.png);
  background-position: 0 center;
  margin-left: 0.5rem;
  background-repeat: no-repeat;
  background-size: 0.4rem;
  font-size: 0.44rem;
  line-height: 0.44rem;
  color: #303030;
}
.d-b-btn {
  width: 3.49rem;
  height: 0.84rem;
  background-color: #343434;
  border-radius: 0.39rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.44rem;
  color: #ffffff;
  margin-right: 0.53rem;
}
.d-pay-mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
.d-pay-content {
  font-family: PingFang-SC-Regular;
  width: 7.83rem;
  height: 5.88rem;
  background-color: #ffffff;
  border-radius: 0.2rem;
  margin: 5rem auto;
  padding-top: 1px;
}
.d-p-title {
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.44rem;
  color: #303030;
  margin-top: 0.41rem;
}
.d-p-money {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.44rem;
  color: #343434;
  display: flex;
  justify-content: center;
  margin: 0.2rem auto;
}
.d-p-money img {
  width: 0.64rem;
  height: 0.77rem;
  margin-left: -0.1rem;
  margin-right: 0.1rem;
}
.d-p-tips {
  width: 70%;
  margin: 0 auto;
  margin-top: 0.34rem;
  text-align: center;
  font-size: 0.41rem;
  color: #888888;
}
.d-p-sure-btn {
  width: 6.63rem;
  height: 1rem;
  background-color: #343434;
  border-radius: 0.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: KozGoPr6N-Regular;
  font-size: 0.41rem;
  color: #ffffff;
  margin-top: 0.53rem;
}
</style>
